<script setup>
import {ref,defineProps,watch} from "vue";
import router from "@/router/index.js";

const props = defineProps({show: Boolean})
let bindMessageVisible = ref(props.show)

// 处理绑定信息显示的逻辑
const over = (num) => {
  if (num===1){
    console.log("后端个人信息绑定")
  }
  bindMessageVisible.value=false;
  router.push("/Login");
}

// 监听props.show的变化，更新bindMessageVisible的值
watch(() => props.show, (newVal) => {
  bindMessageVisible.value = newVal;
});

const form = ref({
  name: "",
  gender: "",
  birth: "",
  phone: "",
})

</script>


<template>
  <el-dialog v-model="bindMessageVisible" title="信息绑定" width="800" :show-close="false">
    <div>
      <el-form :model="form" label-width="100px">
        <el-form-item label="昵称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="form.gender" />
        </el-form-item>
        <el-form-item label="生日">
          <el-input v-model="form.birth" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="over(0)">跳过</el-button>
        <el-button type="primary" @click="over(1)">验证</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>